<template>
  <el-card class="course-section">
    <div slot="header" class="header">
      课程内容-{{ courseId }}
      <el-button @click="addSection">添加章节</el-button>
    </div>
    <el-tree
      ref="tree"
      :data="sections"
      :props="defaultProps"
      draggable
      :allow-drop="allowDrop"
      @node-drop="handleDrop"
    >
      <span class="inner" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span class="actions" v-if="isSection(data)">
          <el-button size="mini" @click="() => editSection(data)">
            编辑
          </el-button>
          <el-button size="mini" @click="() => addLesson(data)">
            添加课时
          </el-button>
          <el-select
            v-model="data.status"
            size="mini"
            @change="changeStatus(data)"
          >
            <el-option
              v-for="item in [
                {
                  label: '隐藏',
                  value: 0,
                },
                {
                  label: '待更新',
                  value: 1,
                },
                {
                  label: '已发布',
                  value: 2,
                },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
        <span class="actions" v-else>
          <el-button size="mini" @click="editLesson(data)"> 编辑 </el-button>
          <el-button size="mini" @click="$router.push({ name: 'course-video', params: { courseId },query:{
            lessonId:data.id,
            sectionId:node.parent.data.id,
          } })">
            上传视频
          </el-button>
          <el-select
            v-model="data.status"
            size="mini"
            @change="changeStatus(data)"
          >
            <el-option
              v-for="item in [
                {
                  label: '隐藏',
                  value: 0,
                },
                {
                  label: '未发布',
                  value: 1,
                },
                {
                  label: '已发布',
                  value: 2,
                },
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
      </span>
    </el-tree>

    <DialogAddOrEditSection ref="dialogAddSection" :course-id="courseId" />
    <DialogAddOrEditSection ref="dialogEditSection" :id="editId" />
    <DialogAddOrEditLesson ref="dialogAddLesson" :section-id="editSectionId" />
    <DialogAddOrEditLesson ref="dialogEditLesson" :id="editId" />
  </el-card>
</template>
<script lang="ts">
import { getSectionAndLesson, saveOrUpdateLesson, saveOrUpdateSection } from '@/services/course'
import DialogAddOrEditSection from './components/DialogAddOrEditSection.vue'
import DialogAddOrEditLesson from './components/DialogAddOrEditLesson.vue'
import Vue from 'vue'
import { ID } from '@/types'
export default Vue.extend({
  name: 'course-section',
  components: {
    DialogAddOrEditSection,
    DialogAddOrEditLesson
  },
  props: {
    courseId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      sections: [],
      editId: '' as ID,
      editSectionId: '' as ID,
      defaultProps: {
        label: (data: any) => data.sectionName || data.theme,
        children: 'lessonDTOS'
      }
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    async loadData () {
      const { data } = await getSectionAndLesson(this.courseId)
      this.sections = data.data
    },
    allowDrop (draggingNode: any, dropNode: any, type: string) {
      return draggingNode.data.sectionId === dropNode.data.sectionId && type !== 'inner'
    },
    async handleDrop (draggingNode: any, dropNode: any) {
      const sortApi = this.isSection(draggingNode.data) ? saveOrUpdateSection : saveOrUpdateLesson
      await Promise.all((dropNode.parent || (this.$refs.tree as any).root).childNodes.map((itemNode: any, index: number) => sortApi({ id: itemNode.data.id, orderNum: index + 1 })))
      this.$message.info('已排序')
    },
    isSection (item: any) {
      return !item.sectionId
    },
    async changeStatus (item: any) {
      const api = this.isSection(item) ? saveOrUpdateSection : saveOrUpdateLesson
      await api({ id: item.id, status: item.status })
      this.$message.info('状态已更新')
    },
    async addSection () {
      try {
        await (this.$refs.dialogAddSection as PromiseDialog).open()
        this.$message.info('已添加')
      } catch (e) {
        console.log('e:', e)
        // this.$message.error(e.toString())
      }
    },
    async editSection (item: { id: ID }) {
      this.editId = item.id
      try {
        await (this.$refs.dialogEditSection as PromiseDialog).open()
        this.$message.info('已编辑')
      } catch (e) {
        console.log('e:', e)
        // this.$message.error(e.toString())
      }
    },
    async addLesson (item: { id: ID }) {
      this.editSectionId = item.id
      try {
        await (this.$refs.dialogAddLesson as PromiseDialog).open()
        this.$message.info('已添加')
      } catch (e) {
        console.log('e:', e)
        // this.$message.error(e.toString())
      }
    },
    async editLesson (item: { id: ID }) {
      this.editId = item.id
      try {
        await (this.$refs.dialogEditLesson as PromiseDialog).open()
        this.$message.info('已编辑')
      } catch (e) {
        console.log('e:', e)
        // this.$message.error(e.toString())
      }
    }
  }
})
</script>
<style lang="scss" scoped>
.course-section {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  ::v-deep .el-tree-node__content {
    height: auto;
  }
  .inner {
    display: flex;
    flex: 1;
    justify-content: space-between;
    border-bottom: 1px solid #ebeef5;
    padding: 6px;
  }
  .actions {
    .el-select {
      margin-left: 10px;
      width: 100px;
    }
  }
}
</style>
